<template>
  <div class="login-item">
    <div style="background-color: #f6f6f8">
      <Input v-model="value.codeOrPwd" :maxlength="6" class="form-input" placeholder="请输入验证码" />
      <span
        v-if="codeTime == 0"
        @click="getCode"
        :class="['login_from_code_span', !ifNumberShow && flagShow ? 'disabled' : '']">
        {{ codeMess }}
      </span>
      <span v-else class="login_from_code_span disabled">{{ codeTime }}s后重新获取</span>
    </div>
  </div>
</template>
<script>
  import loginMgr from '../../biz/index'
  import dt from '@dt/dt'
  export default {
    props: {
      value: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        codeTime: 0,
        codeMess: '点击获取',
        flagShow: true
      }
    },
    computed: {
      ifNumberShow() {
        let { phone, roleId } = this.value,
          r = /^1[3456789]\d{9}$/
        if (phone && phone.length == 11 && r.test(phone) && roleId) return true
        return false
      }
    },
    methods: {
      // 获取验证码
      getCode() {
        if (!this.ifNumberShow) return
        this.flagShow = false
        loginMgr
          .code(this.value.phone)
          .then((res) => {
            dt.ui.Message.success('验证码发送成功')
            this.countdownTime()
          })
          .catch((err) => {
            this.codeTime = 0
            this.codeMess = '点击获取'
            this.flagShow = true
          })
      },
      // 倒计时60s
      countdownTime() {
        this.codeTime = 120
        this.timeout = setInterval(() => {
          this.codeTime = this.codeTime - 1
          if (this.codeTime == 0) {
            this.codeMess = '再次获取'
            this.flagShow = true
            clearInterval(this.timeout)
          }
        }, 1000)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-item {
    margin-bottom: 5%;

    label {
      color: #333333;
      display: inline-block;
      margin-bottom: 3%;
    }

    div {
      height: 100%;
      display: flex;
      align-items: center;
    }

    .role-menu {
      width: 140px;
      height: 25px;
      line-height: 25px;
      border-left: 1px solid #eee;
      background-color: #f6f6f8;

      :deep(.ivu-dropdown-rel) {
        margin: 0;
        padding: 0 10px 0 16px;
        width: 140px;
      }

      :deep(.ivu-dropdown-item) {
        width: 140px;
      }
    }

    .form-input {
      flex: 1;
    }

    .role-label {
      display: flex;
      justify-content: space-between;
      height: 36px;
      line-height: 36px;
    }
  }

  .login_from_code_span {
    color: #2298ff;
    cursor: pointer;
    padding-right: 10px;
  }

  .login_from_code_span.disabled {
    color: #ccc;
    cursor: no-drop;
  }

  :deep(.ivu-input) {
    height: 50px;
    padding-left: 12px;
    border: none;
    box-shadow: none;
    background-color: #f6f6f8;
  }

  :deep(.ivu-input-suffix) i {
    line-height: 50px;
  }
</style>
